<template>
  <div class="detail">
    <div class="header">
      <van-icon class="back" @click="back" name="arrow-left" size="26" />
      <p class="p">{{ name }}</p>
      <van-icon
        class="love"
        @click="tolove"
        name="manager"
        size="26"
        color="gold"
      />
    </div>
    <div class="avator">
      <img :src="avatorUrl" alt="" />
    </div>
    <!-- 列表 -->
    <ul class="scroll-box">
      <li
        v-for="(item, index) in list"
        :key="item.id"
        @click="playMusic(index)"
      >
        <div class="left-box">{{ index + 1 }}</div>
        <div class="right-box">
          <h2>{{ item.name }}</h2>
          <p>{{ item.album }}</p>
        </div>
        <div class="time-box">{{ item.duration | formatTime }}</div>
      </li>
    </ul>
  </div>
</template>
<script>
import { getSongsBySinger, getUrlByMid } from "./service";
import songMixin from "mixins/songMixin";
import { mapMutations } from "vuex";
export default {
  mixins: [songMixin],
  data() {
    return {
      name: "",
      mid: "",
      list: [], // 歌单列表
    };
  },
  methods: {
    ...mapMutations("player", [
      "addSongList",
      "changeCurSongIdx",
      "toggleScreen",
    ]),
    back() {
      this.$router.history.go(-1);
    },
    tolove() {
      this.$router.push("/user");
    },
    async initData(mid) {
      const { code, result } = (await getSongsBySinger(mid)) || {};
      // console.log(code);
      if (code) return false;
      const mids = (result?.songs || []).map((item) => item.mid);
      // console.log(mids);
      const { err, urls } = await getUrlByMid(mids);
      // console.log(err);
      // console.log(urls);
      if (err) return false;
      // 将歌曲的基本信息和播放链接进行合并操作
      this.list = (result?.songs || []).map((item, index) => {
        return {
          ...item,
          songUrl: urls[index],
        };
      });
      // console.log(this.list, "15445");
      // console.log(urls);
    },
    getMidAndName(obj) {
      const { params, query } = obj;
      const { mid } = params;
      const { name } = query;
      this.name = name;
      this.mid = mid;
      this.initData(mid);
    },
    playMusic(index) {
      // 点击歌曲li 1. 添加歌单 2.记录当前点击歌曲的下标 3.将屏幕变大 通过action合并
      this.addSongList(this.list);
      this.changeCurSongIdx(index);
      this.toggleScreen(true);
    },
  },
  async mounted() {
    this.getMidAndName(this.$route);
    console.log("mounted");
    // console.log(this.$route);
    // 测试获取歌曲的url
    const url = await getUrlByMid(["001Qu4I30eVFYb", "0013WPvt4fQH2b"]);
    console.log("url", url);
  },
  filters: {
    formatTime(data) {
      let m = parseInt(data / 60);
      let s = parseInt(data % 60);
      return `${m > 9 ? m : "0" + m}:${s > 9 ? s : "0" + s}`;
    },
  },
  watch: {
    $route(newV, oldV) {
      // 路由没有变化不执行
      if (newV.fullPath === oldV.fullPath) return false;
      console.log("路由改变");
      // console.log(newV, oldV);
      this.getMidAndName(newV);
    },
  },
};
</script>
<style lang="less" scoped>
@import "styles/index.less";
.header {
  background: rgba(7, 17, 27, 0.4);
  .line-height(40);
  font-size: 18px;
  color: #ffcd32;
  // position: sticky;
  position: fixed;
  top: 0;
  z-index: 8;
  .h(40);
  .w(375);
  .back {
    color: #ffcd32;
    position: absolute;
    .top(6);
    .left(14);
  }
  .love {
    position: absolute;
    .top(6);
    .right(14);
  }
  .p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    width: 80%;
    margin-left: 10%;
  }
}
.detail {
  background: #222;
  .avator {
    .w(375);
    .h(260);
    img {
      width: 100%;
      height: 100%;
    }
  }
  .scroll-box {
    .w(375);
    .min-h(600);
    color: #fff;
    // overflow: scroll;
    font-size: 14px;
    background: #000;
    .padding(20,20,60,20);
    // box-sizing: border-box;
    li {
      .h(88);
      .w(320);
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left-box {
        font-size: 18px;
        color: hsla(0, 0%, 100%, 0.3);
      }
      .right-box {
        .padding-left(15);
        .padding-right(15);
        h2 {
          .w(210);
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          color: #fff;
        }
        p {
          .w(210);
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          .margin-top(8);
          color: hsla(0, 0%, 100%, 0.3);
        }
      }
    }
  }
}
</style>
